<template>
  <div>
    <!--    首部  -->
    <div id="logoin">
      <!-- 导航栏按钮 -->
      <div id="daoHang" style="box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px; ">
        <div class="w el-row" style="padding: 15px; line-height: 76px;">
          <div class="el-col el-col-12">
            <ul class="imgStyle clearfix">
              <li><img class="logo" src="../assets/logo.png" lazy="loaded" @click="goHome">
              </li>
              <li><img class="textImg" src="../assets/系统.png" lazy="loaded"></li>
            </ul>
          </div>
          <div class="el-col el-col-12" style="text-align: right;">
            <el-button type="primary" @click="userInfo()">查看个人信息</el-button>
            <el-button type="button" @click="userManager()">查看场地预约</el-button>
            <el-button type="danger" @click="outLoad()" size="mini" round>登出</el-button>
          </div>
        </div>
      </div>
    </div>
    <!-- 弹框 -->
    <div id="windows">
      <!-- 个人信息抽屉 -->
      <el-drawer class="info" title="个人信息" :visible.sync="drawerUser" direction="ltr" size="50%"
        style="font-weight: bold;">
        <div>
          <div style="width: 100%;">
            <img src="../assets/猫.png" style="display: block; margin: 20px auto;" lazy="loaded">
          </div>
          <div style="margin-top: 10%;">
            <div style="display: flex;">
              <span style="width: 50%; padding-left: 15vw;" class='tag'>昵 称：</span>
              <el-input v-model="userInfoForm.uname" :disabled="lockInfo" style="width: 50%; 
                padding-right: 15vw;
                padding-left: 2vw;
                "></el-input>
            </div>
            <el-divider></el-divider>
            <div style="display: flex;">
              <span style="width: 50%; padding-left: 15vw;" class='tag'>性 别：</span>
              <el-input v-model="userInfoForm.sex" :disabled="lockInfo" style="width: 50%; 
                padding-right: 15vw;
                padding-left: 2vw;
                "></el-input>
            </div>
            <el-divider></el-divider>
            <div style="display: flex;">
              <span style="width: 50%; padding-left: 15vw;" class='tag'>年 龄：</span>
              <el-input v-model="userInfoForm.age" :disabled="lockInfo" style="width: 50%; 
                padding-right: 15vw;
                padding-left: 2vw;
                "></el-input>
            </div>
            <el-divider></el-divider>
            <div style="display: flex;">
              <span style="width: 50%; padding-left: 15vw;" class='tag'>学 院：</span>
              <el-input v-model="userInfoForm.college" :disabled="lockInfo" style="width: 50%; 
                padding-right: 15vw;
                padding-left: 2vw;
                "></el-input>
            </div>
            <el-divider></el-divider>
            <div style="display: flex;">
              <span style="width: 50%; padding-left: 15vw;" class='tag'>班 级：</span>
              <el-input v-model="userInfoForm.cla" :disabled="lockInfo" style="width: 50%; 
                padding-right: 15vw;
                padding-left: 2vw;
                "></el-input>
            </div>
            <el-divider></el-divider>
            <div style="display: flex;">
              <span style="width: 50%; padding-left: 15vw;" class='tag'>信誉分：</span>
              <el-input v-model="userInfoForm.credit" :disabled="lockInfo" style="width: 50%; 
                padding-right: 15vw;
                padding-left: 2vw;
                "></el-input>
            </div>
            <el-divider></el-divider>
            <div style="display: flex;">
              <span style="width: 50%; padding-left: 15vw;" class='tag'>爱 好：</span>
              <el-tag type="success" size="medium" effect="dark" style="margin-right: 1vw;">羽毛球</el-tag>
              <el-tag type="warning" size="medium" effect="dark">游泳</el-tag>
            </div>
          </div>
          <div style="padding-top: 10%;padding-bottom: 10%;">
            <el-button type="primary" v-if="this.lockInfo" @click="editerInfo()" round
              style="width: 150px; font-size: 20px;">信息编辑</el-button>
            <el-button type="success" v-if="!this.lockInfo" @click="saveInfo()" round
              style="width: 150px; font-size: 20px;">保存</el-button>
          </div>
        </div>
      </el-drawer>

      <!-- 场地预约管理抽屉 -->
      <el-drawer class="info" title="场地预约管理" :visible.sync="drawerMang" direction="btt" size="45%"
        style="font-weight: bold;">
        <div>
          <el-table :data="tableData" style="width: 100%; table-layout: fixed; text-align: center;"
            :row-class-name="tableRowClassName">
            <el-table-column align="center" prop="gId" label="场地名称">
            </el-table-column>
            <el-table-column align="center" prop="tId" label="预约时间段">
            </el-table-column>
            <el-table-column align="center" prop="pDate" label="预约日期">
            </el-table-column>
            <el-table-column align="center" prop="pState" label="当前状态">
            </el-table-column>
            <el-table-column align="center" fixed="right" label="操作">
              <template slot-scope="scope">
                <el-button type="danger" size="small" @click="downP(scope.$index, tableData)"
                  :disabled="scope.row.pState === '预约已失效'">退订</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-drawer>
    </div>
    <!--  内容体  -->
    <div id="body">
      <div class="el-row" :style="bgStyle">
        <div class="el-col el-col-24">
          <ul class="search" style="margin-top: 180px;">
            <li>
              <p style="color: rgb(255, 255, 255);">智慧场馆</p>
            </li>
            <li><span style="color: rgb(255, 255, 255);">INTELLIGENT VENUES</span></li>
            <li class="searchInput" style="width: 674px;">
              <div class="input-with-select el-input el-input-group el-input-group--append">
                <input type="text" autocomplete="off" placeholder="请输入活动类型名称" class="el-input__inner noYuan">
                <div class="el-input-group__append">
                  <button type="button" class="el-button el-button--default"
                    style="color: rgb(255, 255, 255);"><img src="../assets/搜索.png" alt="Some description" />
                  </button>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="w el-row">
        <div class="APPmodule el-col el-col-24">
          <div class="el-carousel el-carousel--horizontal">
            <div class="el-carousel__container" style="height: 150px;">
              <div class="el-carousel__item is-active is-animating" style="transform: translateX(0px) scale(1);">
                <ul class="clearfix">
                  <li><a href="javascript:;"><img alt="" src="../assets/舞蹈.png" lazy="loading" @click="goOne('舞蹈')"></a>
                    <p>舞蹈</p>
                  </li>
                  <li><a href="javascript:;"><img alt="" src="../assets/足球.png" lazy="loaded" @click="goOne('足球')"></a>
                    <p>足球</p>
                  </li>
                  <li><a href="javascript:;"><img alt="" src="../assets/篮球.png" lazy="loading" @click="goOne('篮球')"></a>
                    <p>篮球</p>
                  </li>
                  <li><a href="javascript:;"><img alt="" src="../assets/排球.png" lazy="loaded" @click="goOne('排球')"></a>
                    <p>排球</p>
                  </li>
                  <li><a href="javascript:;"><img alt="" src="../assets/网球.png" lazy="loading" @click="goOne('网球')"></a>
                    <p>网球</p>
                  </li>
                  <li><a href="javascript:;"><img alt="" src="../assets/飞盘.png" lazy="loading" @click="goOne('飞盘')"></a>
                    <p>飞盘</p>
                  </li>
                  <li><a href="javascript:;"><img alt="" src="../assets/羽毛球.png" lazy="loaded" @click="goOne('羽毛球')"></a>
                    <p>羽毛球</p>
                  </li>
                  <li><a href="javascript:;"><img alt="" src="../assets/乒乓球.png" lazy="loaded" @click="goOne('乒乓球')"></a>
                    <p>乒乓球</p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="clearfix recommended el-col el-col-24">
          <div class="line fl"></div>
          <div class="fl">体育场馆</div>
          <a href="javascript:;" class="fr" @click="goMore()">
            更多
            <span class="spanArrow">&gt;</span></a>
        </div>
        <div class="el-col el-col-24">
          <ul class="cardUl clearfix">
            <li>
              <div class="el-card iscard is-hover-shadow">
                <div class="el-card__body">
                  <div class="cardUrl"><img src="../assets/tyg.jpg" class="image" alt="" @click="goTwo('文昌校区')"></div>
                  <div class="cardP15">
                    <h3 style="height: 40px;">
                      文昌校区体育馆</h3>
                    <p title="文昌校区" class="address">地址: 文昌校区</p>
                    <div class="bottom clearfix"><span class="time">开放时间: 09:00-22:00</span>
                      
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="el-card iscard is-hover-shadow">
                <div class="el-card__body">
                  <div class="cardUrl"><img src="../assets/tyg2.jpg" class="image" alt="" @click="goTwo('全部')"></div>
                  <div class="cardP15">
                    <h3 style="height: 40px;">
                      剑盘校区体育馆</h3>
                    <p title="文昌校区" class="address">地址: 剑盘校区</p>
                    <div class="bottom clearfix"><span class="time">开放时间: 09:00-22:00</span>
                      
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="el-card iscard is-hover-shadow">
                <div class="el-card__body">
                  <div class="cardUrl"><img src="../assets/tyg3.jpg" class="image" alt="" @click="goTwo('柳石校区')"></div>
                  <div class="cardP15">
                    <h3 style="height: 40px;">
                      柳石校区体育馆</h3>
                    <p title="柳东校区" class="address">地址: 柳石校区</p>
                    <div class="bottom clearfix"><span class="time">开放时间: 09:00-22:00</span>
                      
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <li>
              <div class="el-card iscard is-hover-shadow">
                <div class="el-card__body">
                  <div class="cardUrl"><img src="../assets/tyg4.jpg" class="image" alt="" @click="goTwo('柳东校区')"></div>
                  <div class="cardP15">
                    <h3 style="height: 40px;">
                      柳东校区体育馆</h3>
                    <p title="文昌校区" class="address">地址: 柳东校区</p>
                    <div class="bottom clearfix"><span class="time">开放时间: 09:00-22:00</span>
                      
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!--  尾部   -->
    <div class="footer" id="end" style="background: #f9f9f9;color: #7e8187;">
      <div class="container container-lg clearfix">
        <div class="pull-left footer-left" style="margin-right: 22px; margin-top: 20px">
          <div class="footer-tt">文昌校区</div>
          <p>地址: 广西柳州市城中区文昌路2号</p>
          <p>邮编: 545006</p>
        </div>
        <div class="pull-left footer-left" style="margin-right: 22px; margin-top: 20px">
          <div class="footer-tt">柳石校区</div>
          <p>地址: 广西柳州市鱼峰区柳石路257号</p>
          <p>邮编: 545005</p>
        </div>
        <div class="pull-left footer-left" style="margin-right: 22px; margin-top: 20px">
          <div class="footer-tt">柳东校区</div>
          <p>地址: 广西柳州市鱼峰区官塘大道19号</p>
          <p>邮编: 545616</p>
        </div>
        <div class="pull-right footer-right" style="margin-top: 20px">
          <p><span>电话: </span>0772-2685979（校办）&nbsp;&nbsp;0772-2687698（传真）
          </p>
          <p>本专科招生: 0772—2687735&nbsp;&nbsp;研究生招生: 0772—2685375</p>
          <p>继续教育招生: 0772—2686688</p>
        </div>
      </div>
      <div class="footer-bottom text-center">备案号: <img src="../assets/footer01.png" alt="">桂XXX备XXXXXXXX号-x<img
          src="../assets/footer02.png">前置审核编号:
        桂xxxxxxxx-xx<span>信息管理: 没人管理</span>
      </div>
    </div>
  </div>
</template>
  
<script>
import {
  postUserInfo,
  postUpdateInfo,
  postPInfo,
  postUpdateP
} from "@/api/base/user";

function Node(gId, tId, pDate, pState, GID, TID, PDATE) {
  this.gId = gId;
  this.tId = tId;
  this.pDate = pDate;
  this.pState = pState;
  this.GID = GID;
  this.TID = TID;
  this.PDATE = PDATE;
}

export default {
  data() {
    return {
      // 主页背景格式
      bgStyle: {
        backgroundImage: 'url(' + require('../assets/城市.png') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center',
        backgroundSize: 'cover',
        height: '514px'
      },
      // 抽屉背景
      drawerBgStyle: {
        backgroundImage: 'url(' + require('../assets/drawer_bg.png') + ')',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center',
        backgroundSize: 'cover',
      },
      // 背景模糊
      blurEnabled: false,
      // 搜索关键字
      key: '',
      // 窗口可见
      dialogFormVisible_user: false,
      dialogFormVisible_admin: false,
      dialogFormVisible_register: false,
      dialogFormVisible_forgetPSW: false,
      // 验证码按钮
      getCode_on: true,
      getCode_dis: false,
      time: 60,
      // 个人信息抽屉
      drawerUser: false,
      drawerMang: false,
      lockInfo: true,
      // 个人信息
      userInfoForm: {
        uname: '',
        age: '保密',
        sex: '保密',
        college: '保密',
        cla: '保密',
        credit: 0,
        mobile: '',
        psw: ''
      },
      // 预约场地信息表
      tableData: []
    };
  },
  watch: {

  },
  computed: {

  },
  methods: {
    // 用户信息更新--成功
    updateInfoSucceed() {
      this.$notify({
        title: '你有一个通知~',
        message: '信息更新完毕(*^_^*)~',
        position: 'top-left',
        type: 'success'
      });
    },
    // 用户信息更新--未知错误
    updateInfoError() {
      this.$notify.error({
        title: '你有一个警告！',
        message: '信息更新出错啦！！',
        position: 'top-left',
      });
    },
    // 用户信息请求
    async getUserInfo() {
      const token = localStorage.getItem('token');
      let res = await postUserInfo(this.userInfoForm, token);
      this.userInfoForm.uname = res.data.uname;
      if (res.data.sex == 0) {
        this.userInfoForm.sex = "女生";
      } else if (res.data.sex == 1) {
        this.userInfoForm.sex = "男生";
      } else {
        this.userInfoForm.sex = "保密";
      }
      if (res.data.college == null || res.data.college == "") {
        this.userInfoForm.college = "保密";
      } else {
        this.userInfoForm.college = res.data.college;
      }
      if (res.data.cla == null || res.data.cla == "") {
        this.userInfoForm.cla = "保密";
      } else {
        this.userInfoForm.cla = res.data.cla;
      }
      if (res.data.age == 0) {
        this.userInfoForm.age = "保密";
      } else {
        this.userInfoForm.age = res.data.age;
      }
      this.userInfoForm.credit = res.data.credit;
      this.userInfoForm.mobile = res.data.mobile;
    },
    // 点击个人信息管理页面
    async userInfo() {
      await this.getUserInfo();
      this.drawerUser = true;
    },
    // 点击个人页面-信息编辑
    editerInfo() {
      this.lockInfo = false;
    },
    // 用户信息更新请求
    async updateInfo() {
      let t = {
        uname: this.userInfoForm.uname,
        age: this.userInfoForm.age,
        sex: this.userInfoForm.sex,
        college: this.userInfoForm.college,
        cla: this.userInfoForm.cla,
        credit: this.userInfoForm.credit,
        mobile: this.userInfoForm.mobile
      }
      if (t.age == "保密")
        t.age = 0;
      if (t.college == "保密")
        t.college = null;
      if (t.cla == "保密")
        t.cla = null;
      if (t.sex == "女生")
        t.sex = 0;
      else if (t.sex == "男生")
        t.sex = 1;
      const token = localStorage.getItem('token');
      let res = await postUpdateInfo(t, token);
      if (res.data == "Success")
        this.updateInfoSucceed();
      else
        this.updateInfoError();
    },
    // 点击个人页面-保存信息
    async saveInfo() {
      this.lockInfo = true;
      this.updateInfo();
    },
    // 点击个人预约管理
    async userManager() {
      await this.getUserInfo();
      const token = localStorage.getItem('token');
      let t = {
        uname: this.userInfoForm.uname,
        age: this.userInfoForm.age,
        sex: this.userInfoForm.sex,
        college: this.userInfoForm.college,
        cla: this.userInfoForm.cla,
        credit: this.userInfoForm.credit,
        mobile: this.userInfoForm.mobile
      }
      if (t.age == "保密")
        t.age = 0;
      if (t.college == "保密")
        t.college = null;
      if (t.cla == "保密")
        t.cla = null;
      if (t.sex == "女生")
        t.sex = 0;
      else if (t.sex == "男生")
        t.sex = 1;
      let res = await postPInfo(t, token);
      this.tableData = [];
      for (let i = 0; i < res.data.length; i++) {
        let p_datee = new Date(res.data[i].p_date).toISOString().slice(0, 10);
        p_datee = new Date(p_datee).setDate(new Date(p_datee).getDate() + 1);
        p_datee = new Date(p_datee).toISOString().slice(0, 10);
        let state;
        if (res.data[i].p_state == 1) {
          state = "已预约"
        } else {
          state = "预约已失效"
        }
        this.tableData.push(new Node(res.data[i].c_name, res.data[i].start_time + "~" + res.data[i].end_time, p_datee, state, res.data[i].g_id, res.data[i].t_id, p_datee))
      }
      this.dialogFormVisible_schedule = true;
      this.drawerMang = true;
    },
    // 场地预约管理的状态列
    tableRowClassName({ row }) {
      if (row.pState === '预约已失效') {
        return 'warning-row';
      } else if (row.pState === '已预约') {
        return 'success-row';
      }
      return '';
    },
    // 发送更新预约请求
    async sendUpdateP(GID, TID, PDATE) {
      const token = localStorage.getItem('token');
      await postUpdateP({ "GID": GID, "TID": TID, "PDATE": PDATE }, token);
      this.userManager();
    },
    // 取消预订提示框
    async downP(index, rows) {
      this.$confirm('是否确认取消预订？', '错做不可逆', {
        cancelButtonText: '点错了',
        confirmButtonText: '取消预定',
        type: 'warning'
      }).then(() => {
        this.sendUpdateP(rows[index].GID, rows[index].TID, rows[index].PDATE);
        this.$message({
          type: 'success',
          message: '已取消预订!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '不取消我们就是好朋友!'
        });
      });
    },
    // 跳转主页面
    goHome() {
      this.$router.push('/')
    },
    // 场地页面跳转
    goOne(type) {
      this.$router.push({ name: 'groundView', params: { Type: type, School: "全部" } })
    },
    // 校区页面跳转
    goTwo(school) {
      this.$router.push({ name: 'groundView', params: { School: school, Type: "全部" } })
    },
    // 校区页面跳转
    goMore() {
      this.$router.push({ name: 'groundView', params: { School: "全部", Type: "全部" } })
    },
    // 初始化 判断是否需要登陆
    async init() {
      this.token = localStorage.getItem('token');
      if (this.token != null)
        await this.getUserInfo();
      else
        this.$router.push({ name: 'GXUSTVRS', params: { dialogFormVisible_user: true } })
    },
    // 登出
    outLoad() {
      localStorage.removeItem('token');  
      this.$router.push('/GXUSTVRS')
    }
  },
  created() {
    this.init();
  }
}
</script>